<style lang="less">
.md-editor{
    min-height: 300px;
    height: 300px;
    position: relative;

    .mavon-editor{
        height: 100%;
        min-height: 0;
        z-index: auto;
    }

    .md-loading{
        padding: 0 20px;
        text-align: center;
    }
}
</style>
<template>
    <div class="md-editor">
        <mavon-editor
            class="mavon-editor"
            v-if="mavonEditorReady"
            :language="mdProps.language"
            :code_style="mdProps.code_style"
            :toolbars-flag="mdProps.toolbarsFlag"
            :toolbars="mdProps.toolbars"
            :subfield="mdProps.subfield"
            :editable="mdProps.editable"
            v-model="content"
            @imgAdd="imgAdd"
        ></mavon-editor>
        <div v-else class="md-loading">Loading...</div>
    </div>
</template>
<script>
import Vue from 'vue';
import lodash from 'lodash';
import Promise from 'bluebird';
import qiniu from '../services/qiniu';

export default {
    props: {
        value: String
    },
    data() {
        return {
            mavonEditorReady: false,
            mdProps: null,
            content: ''
        };
    },
    methods: {
        loadMavonEditor() {
            if(this.loadMavonEditor.promise) {
                return this.loadMavonEditor.promise;
            }

            this.loadMavonEditor.promise = new Promise(resolve => {
                require([
                    'mavon-editor/dist/css/index.css',
                    'mavon-editor'
                ], (require) => {
                    resolve(require('mavon-editor'));
                });
            })
            .then(mavonEditor => {
                Vue.use(mavonEditor);

                this.content = this.value;

                this.mavonEditorReady = true;

                return mavonEditor;
            })
            .timeout(10000, 'Editor load timeout');

            return this.loadMavonEditor.promise;
        },
        imgAdd(pos, $file) {
            const ctx = this;
            qiniu.upload($file, null, {
                filename: 'file'
            })
            .then((res) => {
                ctx.content = ctx.content.replace('![图片](' + pos + ')', '![图片](' + res.url + ')');
            });
        },
    },
    watch: {
        value(val) {
            this.content = val;
        },
        content(val) {
            this.$emit('input', val);
            this.$emit('change', val);
        }
    },

    created() {
        this.mdProps = lodash.defaults(this.mdProps || {}, {
            language: 'cn',
            code_style: 'code-github',
            subfield: true,
            editable: true,
            toolbarsFlag: true,
            toolbars: {
                bold: true, // 粗体
                italic: true, // 斜体
                header: true, // 标题
                underline: true, // 下划线
                strikethrough: true, // 中划线
                mark: true, // 标记
                superscript: true, // 上角标
                subscript: true, // 下角标
                quote: true, // 引用
                ol: true, // 有序列表
                ul: true, // 无序列表
                link: true, // 链接
                imagelink: true, // 图片链接
                code: true, // code
                table: true, // 表格
                subfield: true, // 是否需要分栏
                fullscreen: true, // 全屏编辑
                // readmodel: true, // 沉浸式阅读
                // htmlcode: true, // 展示html源码
                help: true, // 帮助
                /* 1.3.5 */
                undo: true, // 上一步
                redo: true, // 下一步
                trash: true, // 清空
                // save: true, // 保存（触发events中的save事件）
                /* 1.4.2 */
                navigation: true // 导航目录
            }
        });

        this.loadMavonEditor();
    }
};
</script>